<style>
        .out{
            background-color: #fff;
            border: 1px solid #888;
            width:99%;
            color:#444;
        }
    </style>
    <div class='title'>代码编辑器</div>
    
    <div class="sub">
    <div class='text indent'>
        JUI中的代码编辑器的前身是 <a class='link' target="view_window" href="https://www.theajack.com/jcode">Jcode</a>，它是一个通用性的代码编辑器，支持多种语言，支持多行缩进缩退。。在JUI中对其进行了重构，并新增了数据绑定、选中行高亮、行数索引等功能。
        详细属性配置与JCode一致，详情请点击 <a class='link' target="view_window" href="https://www.theajack.com/jcode">Jcode API</a>查看，这里只做大致介绍。
        请看几个例子：
    </div>
    <div class='title'>1.不启用绑定：</div>
    <div class='text'>
        <div class='j-code' width='99%' disabled height='auto'>
&lt;div class='j-code' width='99%' height='auto'>
function hello(){
    console.log('hello world')
}
&lt;/div>
        </div>
        结果如下：
        <div class='j-code not-test' width='99%' height='auto'>
function hello(){
    console.log('hello world')
}
        </div>
    </div>
    <div class='title'>2.启用绑定：</div>
    <div class='text'>
        <div class='j-code' disabled width='99%' height='auto'>
&lt;div class='j-code' width='99%' height='auto' jui-bind='code'>
&lt;/div>
&lt;script>
    new Jet({
        data:{
            code:'var message="Hello world!"',
        }
    });
&lt;/script>
        </div>
        结果如下：
        <div class='j-code not-test' width='99%' height='auto' jui-bind='code'>
function hello(){
    console.log('hello world')
}
        </div>
    </div>
    <div class='title'>
        3.其他属性：
    </div>
    <div class='text'>
        <div class="list">
            <div>1.disabled:是否禁用编辑，默认为false</div>
            <div>2.height,width:控制编辑器的尺寸，默认值为200px,300px。可以使用的单位有px,%,em。还可以使用auto来使其根据内容自适应。</div>
            <div>3.buttons:功能按钮，不设置该属性，默认不启用按钮。设置该属性但不设置值时，默认全部启用。可选值为fontSizeUp,fontSizeDown,fullScreen,fix,clearColor,clearCode,resetCode,copy,submit，设置时使用分号间隔</div>
            <div>4.jui-code-line:是否显示行数索引，默认值为true</div>
            <div>5.jui-code-trim:是否喊出首尾的换行和尾部的空格，默认值为true</div>
            <div>6.callback:设置一个回调函数，可以是一段js代码或者Jet函数(使用Jet函数需要设置了jui-bind属性)。该回调函数会在submit函数被调用或点击submit按钮时调用，回调参数有两个，第一个是jui对象，第二个是内容。</div>
        </div>
        请看一个例子：
    </div>
    <div class='text'>
        <div class='j-code' disabled width='99%' height='auto'>
&lt;div class='j-code not-test' disabled='false' width='auto' height='auto' buttons='fullScreen;copy;submit' jui-code-line='false' callback='alert("callback")' jui-code-trim='false'>
    buttons='fullScreen;copy;submit' 
    jui-code-line='false' 
    callback='alert("callback")' 
    jui-code-trim='false'>
function hello(){
    console.log('hello world')
}
&lt;/div>
        </div>
        <div class='text'> 结果如下：</div>
        <div class='j-code not-test' disabled='false' width='auto' height='auto' buttons='fullScreen;copy;submit' jui-code-line='false' callback='alert("callback")' jui-code-trim='false'>
function hello(){
    console.log('hello world')
}
        </div>
    </div>
    <div class='title'>
        4.jui 函数：
    </div>
    <div class='text'>
        绑定dom元素对应的jui元素有以下方法
        <div class="list">
            <div>1.fontSizeUp:放大字体</div>
            <div>2.fontSizeDown:缩小字体</div>
            <div>3.fullScreen:全屏</div>
            <div>4.fix:修复重影问题</div>
            <div>5.clearColor:清除颜色</div>
            <div>6.clearCode:清空代码</div>
            <div>7.resetCode:重置代码</div>
            <div>8.copy:复制代码</div>
            <div>9.submit:提交代码，触发callback</div>
        </div>
    </div>
    <div class='title'>
        5.全局配置：
    </div>
    <div class='text'>
        使用JUI.CODE可以配置一些全局参数：
        <div class="list">
            <div>1.JUI.CODE.extend():扩展关键字，详情请见JCode API。</div>
            <div>2.JUI.CODE.tab:设置缩进的表达式，默认为 \t。</div>
        </div>
    </div>
    
    <script>
        new Jet({
            data:{
                code:'var message="Hello world!"',
            }
        });
    </script>